<template>
  <div class="f-r a-c f-w">
    <div class="file-list f-r a-c f-w">
      <div v-for="(file,index) in fileList" :key="file.fileUrl" class="file-box f-c">
        <el-image :src="getFileIcon(file)" class="f-s" style="width:100%;height: 80px" />
        <div class="f-s file-name">{{ file.fileName }}.{{ file.fileType }}</div>
        <div class="del-box">
          <i class="el-icon-delete" @click="delFile(index)" />
        </div>
      </div>
    </div>
    <el-upload action="" class="file-upload" :before-upload="beforeUpload">
      <i class="el-icon-plus avatar-uploader-icon" />
    </el-upload>
  </div>
</template>

<script>
import { uploadFile } from '@/api'
import File_Icon from '@/assets/file.png'
import Excel_Icon from '@/assets/excel.png'
import Word_Icon from '@/assets/word.png'
export default {
  name: 'FileView',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      file: '',
      fileList: []
    }
  },
  watch: {
    value: {
      handler(val) {
        this.fileList = val || []
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    getFileIcon(file) {
      if (['jpeg', 'gif', 'png'].indexOf(file.fileType) > -1) return file.fileUrl
      if (['xls', 'xlsx'].indexOf(file.fileType) > -1) return Excel_Icon
      if (['doc', 'docx'].indexOf(file.fileType) > -1) return Word_Icon
      return File_Icon
    },
    // 上传之前: 获取file对象进行参数验证
    beforeUpload(file) {
      uploadFile(file).then(res => {
        this.fileList.push({
          fileName: res.fileName,
          fileType: res.suffix,
          fileUrl: res.imgUrl
        })
        this.$emit('change', this.fileList)
      })
      return false
    },
    delFile(index) {
      this.fileList.splice(index, 1)
      this.$emit('change', this.fileList)
    }
  }
}
</script>

<style scoped lang="scss">
.file-box {
    width: 100px;
    height: 100px;
    border-radius: 3px;
    opacity: 1;
    margin-right: 10px;
    margin-bottom: 10px;
    position: relative;
    .del-box {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        display: none;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.3);
        .el-icon-delete {
            font-size: 16px;
            text-align: center;
            line-height: 100px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            cursor: pointer;
        }
    }
    &:hover {
        .del-box {
            display: block;
        }
    }
}
.file-upload {
    width: 100px;
    height: 100px;
    border: 1px dashed #d9d9d9;
    .avatar-uploader-icon {
        width: 100px;
        height: 100px;
    }
}
.file-name {
    line-height: 20px;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
}

</style>
